<template>
	<view class="container">
		<view class="content" >
			<!-- <view class="time_box">
				<view class="time_text">2023.05月</view>
				<view class="revenue lf">
					<view class="xjs-mr-32">收入 ¥1200</view>
					<view>支出 ¥183</view>
				</view>
			</view> -->
			<view class="top_box">
				<view class="xjs-ml-32">
					<view class="xjs-size-26 xjs-pt-64 xjs-mb-16">可提现金额(元)</view>
					<view class="xjs-size-64 xjs-weight-bold">{{data.extra.balance}}</view>
					<view class="xjs-size-26 xjs-mt-64">已提现金额：¥ {{data.extra.withdrawn}}（元)</view>
				</view>
				
				<view class="goWithdrawal_box"  @tap="goWithdrawal">
					<view class="goWithdrawal">
						<text>去提现</text>
						<uni-icons type="right" color="#FF6084" size="14"></uni-icons>
					</view>
				</view>
			</view>
			<view class="lf lf-between lf-center xjs-mt-64 xjs-ml-32 xjs-mr-32">
				<view class="xjs-size-32 xjs-weight-bold">账户明细</view>
				<view class="" @tap="goWithdrawalRecord">
					<text class="withdrawal_text">提现记录</text>
					<uni-icons type="right" color="#FF6084" size="13"></uni-icons>
				</view>
			</view>
			<view class="main" v-if="!data.loading">
				<view class="list_box" @click="goDetails(item.id)" v-for="item in data.list">
					<view>
						<view class="xjs-size-32" v-if="item.type==1">服务收益</view>
						<view class="xjs-size-32" v-else-if="item.type==2">平台服务费</view>
						<view class="xjs-size-32" v-else-if="item.type==3">提现</view>
						<view class="xjs-size-32" v-else-if="item.type==4">推广收益</view>
						<view class="xjs-size-32" v-else>工作室接单服务费</view>
						<view class="revenue xjs-pt-16">{{item.createTime}}</view>
					</view>
					<view class="time_text" v-if="item.type!=3"> ¥{{item.amount}}</view>
					<view class="time_text expenditures" v-else>
						-  ¥ {{item.amount}}
					</view>
				</view>
			</view>
			<view class="noRecord" v-else>
				暂无记录～
			</view>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { onShow,onReachBottom,onLoad } from '@dcloudio/uni-app'
	import api from '@/api'
	let data = reactive<any>({
		list:[],
		page:1,
		limit:10,
		loading: false,
		finished: false,
		userId:'',
		extra:{}
	})	
	const goDetails =(id: string)=>{
		console.log(id)
		uni.navigateTo({
			url:'/pages/myStudio/studio/detailedInformation/index?id='+id
		})
	}
	const goWithdrawal =()=>{
		uni.navigateTo({
			url:'/pages/myStudio/studio/initiateWithdrawal/index'
		})
	}
	const goWithdrawalRecord =()=>{
		uni.navigateTo({
			url:'/pages/myStudio/studio/withdrawalRecord/index'
		})
	}
	const getList =async()=>{
		uni.showLoading({
		  title: '加载中',
		  mask: true
		}) 
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/studio-balance-record/page`,
			data:{
				userId:data.userId,
				page:data.page,
				limit:data.limit
			}
			
		})
		data.extra = res.data.extra
		if (res.data.records.length != 0) {
			data.list = data.list.concat(res.data.records);
			data.finished = true
		}else{
			data.finished = false
		}
		if (data.list.length <= 0) {
			data.loading = true
		}
		uni.hideLoading()
	}
	onReachBottom(()=>{
		if (data.finished && !data.loading) {
			data.page++
			getList()
		}
	})
	onLoad((e) => {
		data.userId = e.userId
	})
	onShow(() => {
		uni.hideLoading()
		data.list =[]
		data.page = 1
		getList()
	})
</script>

<style lang="scss" scoped>
	.lf {
		display: flex;
	}
	.noRecord{
		margin-top: 48%;
		text-align: center;
		font-size: 32rpx;
	}
	.lf-between {
		justify-content: space-between;
	}

	.container {
		padding-bottom: var(--safe-area-bottom);
		box-sizing: border-box;
	}
	.expenditures{
		color: #6363FF !important;
	}
	.content {
		.top_box{
			width: 686rpx;
			height: 324rpx;
			background: linear-gradient( 105deg, #FF7D9E 0%, #FFB796 100%);
			border-radius: 24rpx;
			margin: 32rpx auto;
			color: #FFFFFF;
			position: relative;
		}
		.goWithdrawal_box{
			position: absolute;
			top:48rpx;
			right: 0;
			width: 176rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #FFFFFF;
			border-radius: 38rpx 0rpx 0rpx 38rpx;
			color: #FF6084;
			text-align: center;
		}
		.goWithdrawal{
			font-size: 28rpx;
		}
		.withdrawal_text{
			color: #FF6084;
			font-size: 26rpx;
		}
		.time_box {
			display: flex;
			justify-content: space-between;
			margin: 32rpx 32rpx 24rpx 32rpx;
			height: 96rpx;
			line-height: 96rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 0 32rpx;
		}
		.time_text {
			font-weight: bold;
			font-size: 32rpx;
		}
		.revenue {
			color: #7C807F;
			font-size: 26rpx;
		}
		.main{
			border-radius: 24rpx;
			background: #FFFFFF;
			margin: 32rpx;
		}
		.list_box{
			display: flex;
			justify-content: space-between;
			padding: 48rpx 0;
			border-bottom: 1rpx solid #E4E6E6;
			align-items: center;
			margin: 0 32rpx;
		}
		.list_box:last-child{
			border-bottom: 0rpx solid;
		}
	}
</style>